<!--
 * @Author: your name
 * @Date: 2020-09-03 16:12:09
 * @LastEditTime: 2021-10-22 17:38:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /gatt/src/modules/front/pages/Gatt/index.vue
-->
<template>
  <div class="chart">
    <div class="header">
      <div class="header-left">
        <el-button type="primary" size="mini" @click="handlerAddGantt"
          >新建</el-button
        >
        <el-button type="primary" size="mini" @click="handlerSaveData"
          >保存</el-button
        >
        <el-button type="primary" size="mini" @click="handlerCheckList"
          >批量添加数据</el-button
        >
      </div>
    </div>
    <div class="chart-left"
      :style="{ width: rightLineX + 'px' }">
      <gatt-table
        ref="gattTabble"
        :BGScrollTop.sync="BGScrollTop"
        @TableScrollTop="TableScrollTop"
        @handlerRowClick="handlerRowClick">
      </gatt-table>

      <div
        class="chart-left-rightLine"
        :style="{ left: rightLineX + 'px' }"
        ref="rightLine"
        @mousedown="rightLineMousedown"
      ></div>
    </div>
    <div class="chart-right"
      :style="{ left: rightLineX + 2 + 'px' }">
      <gatt-date
        ref="gattDate"
        :rightLineX="rightLineX"
        @handlerBGScroll="handlerBGScroll"
        :currentRow="currentRow"
        :tableScrollTop="tableScrollTop">
      </gatt-date>
    </div>
  </div>
</template>

<script>
import GattTable from './components/GattTable'
import GattDate from './components/GattDate'
export default {
  name: 'Gatt',
  components: {
    GattTable,
    GattDate
  },
  computed: {
    // 当前年份
    currentYear () {
      return new Date().getFullYear()
    }
  },
  data () {
    return {
      // table滚动高度
      tableScrollTop: 0,
      // BG滚动高度
      BGScrollTop: 0,
      // leftMenu的右侧伸缩线
      rightLineX: 300,
      // 整体开始时间
      startTime: 1546617600000,
      // startTime: 1614528000000,
      // 整体结束时间
      endTime: 1548259200000,
      // endTime: 1650211200000,
      data2: {
        list: [
          {
            // 名称
            name: '河北省保定市某小区22#-24#楼进度计划',
            // 负责人
            ower: 'shawn',
            // 进度
            per: 48,
            // 项目类型 1=> 里程碑 2=>计划项目 3=> 分组
            type: '3',
            // 计划周期
            planTime: ['2021/03/01', '2022/04/18'],
            stoneTime: '',
            startTime: '2021/03/01',
            endTime: '2022/04/18',
            id: '0-1-0',
            // 展开与否
            expand: true,
            // 显示与否
            isShow: true,
            // 后置依赖-依赖的子任务id数组集
            depends: [],
            // 后置依赖-依赖于谁(id)子任务的父级任务id
            dependPid: '',
            // 前置依赖-子集
            requireChild: [],
            // 前置依赖 父集id
            requireId: '',
            // 父级id
            parentId: ''
          },
          {
            name: '施工准备',
            ower: 'xiao',
            per: 100,
            type: '2',
            planTime: ['2021/03/01', '2021/03/10'],
            stoneTime: '',
            startTime: '2021/03/01',
            endTime: '2021/03/10',
            id: '0-1-1',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            // 配合前置依赖，它对应的后面的任务
            // requireChild: [{ id: '0-1-2' }],
            parentId: '0-1-0'
          },
          {
            name: '地基处理',
            ower: 'xiao',
            per: 100,
            type: '3',
            planTime: ['2021/3/11', '2021/5/20'],
            stoneTime: '',
            startTime: '2021/3/11',
            endTime: '2021/5/20',
            id: '0-1-2',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            // 前置依赖的id
            // requireId: '0-1-1',
            parentId: '0-1-0'
          },
          {
            name: '基坑开挖',
            ower: 'xiao',
            per: 100,
            type: '2',
            planTime: ['2021/3/11', '2021/4/9'],
            stoneTime: '',
            startTime: '2021/3/11',
            endTime: '2021/4/9',
            id: '0-1-2-0',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 配合前置依赖，它对应的后面的任务
            requireChild: [{ id: '0-1-2-1' }],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-2'
          },
          {
            name: '混凝土灌注桩',
            ower: 'xiao',
            per: 100,
            type: '2',
            planTime: ['2021/4/10', '2021/5/20'],
            stoneTime: '',
            startTime: '2021/4/10',
            endTime: '2021/5/20',
            id: '0-1-2-1',
            expand: true,
            isShow: true,
            // 目标连线id数组集，前置依赖
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            // 前置依赖的id
            requireId: '0-1-2-0',
            parentId: '0-1-2'
          },
          {
            name: '22#楼-24#楼',
            ower: 'xiao',
            per: 100,
            type: '3',
            planTime: ['2021/5/21', '2021/11/2'],
            stoneTime: '',
            startTime: '2021/5/21',
            endTime: '2021/11/2',
            id: '0-1-3',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-0'
          },
          {
            name: '1-10层结构主体',
            ower: 'xiao',
            per: 100,
            type: '2',
            planTime: ['2021/5/21', '2021/6/18'],
            stoneTime: '',
            startTime: '2021/5/21',
            endTime: '2021/6/18',
            id: '0-1-3-0',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-3'
          },
          {
            name: '10-19层结构主体',
            ower: 'xiao',
            per: 100,
            type: '2',
            planTime: ['2021/6/19', '2021/7/23'],
            stoneTime: '',
            startTime: '2021/6/19',
            endTime: '2021/7/23',
            id: '0-1-3-1',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-3'
          },
          {
            name: '1-10层二次结构',
            ower: 'xiao',
            per: 100,
            type: '2',
            planTime: ['2021/7/5', '2021/8/8'],
            stoneTime: '',
            startTime: '2021/7/5',
            endTime: '2021/8/8',
            id: '0-1-3-2',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-3'
          },
          {
            name: '10-19层二次结构',
            ower: 'xiao',
            per: 100,
            type: '2',
            planTime: ['2021/7/21', '2021/8/24'],
            stoneTime: '',
            startTime: '2021/7/21',
            endTime: '2021/8/24',
            id: '0-1-3-3',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-3'
          },
          {
            name: '装修及防水',
            ower: 'xiao',
            per: 100,
            type: '2',
            planTime: ['2021/8/9', '2021/9/22'],
            stoneTime: '',
            startTime: '2021/8/9',
            endTime: '2021/9/22',
            id: '0-1-3-4',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-3'
          },
          {
            name: '消防工程及暖通安装',
            ower: 'xiao',
            per: 60,
            type: '2',
            planTime: ['2021/8/25', '2021/11/2'],
            stoneTime: '',
            startTime: '2021/8/25',
            endTime: '2021/11/2',
            id: '0-1-3-5',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-3'
          },
          {
            name: '停车场',
            ower: 'xiao',
            per: 100,
            type: '2',
            planTime: ['2021/7/24', '2021/8/17'],
            stoneTime: '',
            startTime: '2021/7/24',
            endTime: '2021/8/17',
            id: '0-1-4',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-3'
          },
          {
            name: '主入口',
            ower: 'xiao',
            per: 100,
            type: '2',
            planTime: ['2021/8/18', '2021/9/13'],
            stoneTime: '',
            startTime: '2021/8/18',
            endTime: '2021/9/13',
            id: '0-1-5',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-3'
          },
          {
            name: '道路',
            ower: 'xiao',
            per: 100,
            type: '3',
            planTime: ['2021/9/14', '2021/10/25'],
            stoneTime: '',
            startTime: '2021/9/14',
            endTime: '2021/10/25',
            id: '0-1-6',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-0'
          },
          {
            name: '混凝土路面',
            ower: 'xiao',
            per: 90,
            type: '2',
            planTime: ['2021/9/14', '2021/10/8'],
            stoneTime: '',
            startTime: '2021/9/14',
            endTime: '2021/10/8',
            id: '0-1-6-0',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-6'
          },
          {
            name: '道路绿化工程',
            ower: 'xiao',
            per: 30,
            type: '2',
            planTime: ['2021/10/9', '2021/10/25'],
            stoneTime: '',
            startTime: '2021/10/9',
            endTime: '2021/10/25',
            id: '0-1-6-1',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-6'
          },
          {
            name: '节点区排水',
            ower: 'xiao',
            per: 30,
            type: '2',
            planTime: ['2021/10/26', '2022/1/29'],
            stoneTime: '',
            startTime: '2021/10/26',
            endTime: '2022/1/29',
            id: '0-1-7',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-0'
          },
          {
            name: '排水沟',
            ower: 'xiao',
            per: 0,
            type: '2',
            planTime: ['2021/10/26', '2021/11/29'],
            stoneTime: '',
            startTime: '2021/10/26',
            endTime: '2021/11/29',
            id: '0-1-7-0',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [{ id: '0-1-2' }, { id: '0-1-3' }],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-7'
          },
          {
            name: '排水管',
            ower: 'xiao',
            per: 0,
            type: '2',
            planTime: ['2021/11/3', '2021/12/16'],
            stoneTime: '',
            startTime: '2021/11/3',
            endTime: '2021/12/16',
            id: '0-1-7-1',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-7'
          },
          {
            name: '排水管土建',
            ower: 'xiao',
            per: 0,
            type: '2',
            planTime: ['2021/12/17', '2021/12/31'],
            stoneTime: '',
            startTime: '2021/12/17',
            endTime: '2021/12/31',
            id: '0-1-7-2',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-7'
          },
          {
            name: '排水井',
            ower: 'xiao',
            per: 0,
            type: '2',
            planTime: ['2022/1/1', '2022/1/15'],
            stoneTime: '',
            startTime: '2022/1/1',
            endTime: '2022/1/15',
            id: '0-1-7-3',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-7'
          },
          {
            name: '雨水出水口',
            ower: 'xiao',
            per: 0,
            type: '2',
            planTime: ['2022/1/16', '2022/1/29'],
            stoneTime: '',
            startTime: '2022/1/16',
            endTime: '2022/1/29',
            id: '0-1-7-4',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-7'
          },
          {
            name: '旱溪',
            ower: 'xiao',
            per: 0,
            type: '2',
            planTime: ['2022/1/16', '2022/1/28'],
            stoneTime: '',
            startTime: '2022/1/16',
            endTime: '2022/1/28',
            id: '0-1-7-5',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-7'
          },
          {
            name: '雨水口',
            ower: 'xiao',
            per: 0,
            type: '2',
            planTime: ['2022/1/16', '2022/1/26'],
            stoneTime: '',
            startTime: '2022/1/16',
            endTime: '2022/1/26',
            id: '0-1-7-6',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-7'
          },
          {
            name: '电气一次',
            ower: 'xiao',
            per: 0,
            type: '3',
            planTime: ['2022/1/27', '2022/3/19'],
            stoneTime: '',
            startTime: '2022/1/27',
            endTime: '2022/3/19',
            id: '0-1-8',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-0'
          },
          {
            name: '手井安装',
            ower: 'xiao',
            per: 0,
            type: '2',
            planTime: ['2022/1/27', '2022/2/25'],
            stoneTime: '',
            startTime: '2022/1/27',
            endTime: '2022/2/25',
            id: '0-1-8-0',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-8'
          },
          {
            name: '电缆及钢管安装',
            ower: 'xiao',
            per: 0,
            type: '2',
            planTime: ['2022/2/26', '2022/3/12'],
            stoneTime: '',
            startTime: '2022/2/26',
            endTime: '2022/3/12',
            id: '0-1-8-1',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-8'
          },
          {
            name: '照明灯具及配电箱安装',
            ower: 'xiao',
            per: 0,
            type: '2',
            planTime: ['2022/3/13', '2022/3/19'],
            stoneTime: '',
            startTime: '2022/3/13',
            endTime: '2022/3/19',
            id: '0-1-8-2',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-8'
          },
          {
            name: '服务设施',
            ower: 'xiao',
            per: 0,
            type: '2',
            planTime: ['2022/3/13', '2022/3/19'],
            stoneTime: '',
            startTime: '2022/3/13',
            endTime: '2022/3/19',
            id: '0-1-8-3',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-0'
          },
          {
            name: '完工验收、场地清理、退场',
            ower: 'xiao',
            per: 0,
            type: '2',
            planTime: ['2022/3/20', '2022/4/18'],
            stoneTime: '',
            startTime: '2022/3/20',
            endTime: '2022/4/18',
            id: '0-1-9',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-0'
          }
        ],
        // 字段属性
        fieldsAttr: {
          name: {
            label: '名称',
            showTable: true, // 是否于表格中显示该字段所在列
            showToast: true, // 是否于浮窗内显示该字段
            width: '150px', // 可选
            resizable: true // 可选
          },
          ower: { label: '负责人', showTable: false, showToast: false },
          per: {
            label: '进度',
            showTable: false,
            showToast: false,
            // 设置进度阶段的颜色(可选)
            processColors: [
              { 10: '#be2e55', 20: '#409eff', 50: '#13587e', 100: '#3eb88d' }
            ],
            // 连线选项背景色(可选)
            bgcolor: '#e4e7ed'
          },
          type: { label: '类型', showTable: false, showToast: false },
          startTime: { label: '开始时间', showTable: true, showToast: true },
          endTime: { label: '结束时间', showTable: true, showToast: true }
        }
      },
      data: {
        list: [
          {
            // 名称
            name: 'father0',
            // 负责人
            ower: 'shawn',
            // 进度
            per: 48,
            // 项目类型 1=> 里程碑 2=>计划项目 3=> 分组
            type: '3',
            // 计划周期
            planTime: ['2019/01/05', '2019/01/24'],
            stoneTime: '',
            startTime: '2019/01/05',
            endTime: '2019/01/24',
            id: '0-1-0',
            // 展开与否
            expand: true,
            // 显示与否
            isShow: true,
            // 后置依赖-依赖的子任务id数组集
            depends: [],
            // 后置依赖-依赖于谁(id)子任务的父级任务id
            dependPid: '',
            // 前置依赖-子集
            requireChild: [],
            // 前置依赖 父集id
            requireId: '',
            // 父级id
            parentId: ''
          },
          {
            name: 'child1',
            ower: 'xiao',
            per: 30,
            type: '2',
            planTime: [],
            stoneTime: '',
            startTime: '2019/01/05',
            endTime: '2019/01/12',
            id: '0-1-1',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [{ id: '0-1-2' }, { id: '0-1-3' }],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-0'
          },
          {
            name: 'child2',
            ower: 'dav',
            per: 40,
            type: '3',
            planTime: [],
            stoneTime: '',
            startTime: '2019/01/07',
            endTime: '2019/01/24',
            id: '0-1-4',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-0'
          },
          {
            name: 'child2-1',
            ower: 'lili',
            per: 40,
            type: '2',
            planTime: [],
            stoneTime: '',
            startTime: '2019/01/07',
            endTime: '2019/01/15',
            id: '0-1-4-0',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            requireChild: [{ id: '0-1-4-1' }, { id: '0-1-4-2' }],
            // 依赖于谁(id)
            dependPid: '',
            parentId: '0-1-4'
          },
          {
            name: 'child2-2',
            ower: 'lili',
            per: 40,
            type: '2',
            planTime: [],
            stoneTime: '',
            startTime: '2019/01/16',
            endTime: '2019/01/24',
            id: '0-1-4-1',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            // 前置依赖的id
            requireId: '0-1-4-0',
            parentId: '0-1-4'
          },
          {
            name: 'child2-3',
            ower: 'lili',
            per: 40,
            type: '2',
            planTime: [],
            stoneTime: '',
            startTime: '2019/01/16',
            endTime: '2019/01/24',
            id: '0-1-4-2',
            expand: true,
            isShow: true,
            // 目标连线id数组集
            depends: [],
            // 依赖于谁(id)
            dependPid: '',
            // requireChild: [{
            //   id: '0-1-4-3',
            //   // 任务结束日期提前多少天开始依赖任务（可选）默认任务结束依赖项就开始
            //   advanceDays: 2
            // }],
            // 前置依赖的id
            requireId: '0-1-4-0',
            parentId: '0-1-4'
          },
          // {
          //   name: 'child2-4',
          //   ower: 'lili4',
          //   per: 40,
          //   type: '2',
          //   planTime: [],
          //   stoneTime: '',
          //   startTime: '2019/01/23',
          //   endTime: '2019/02/24',
          //   id: '0-1-4-3',
          //   expand: true,
          //   isShow: true,
          //   // 目标连线id数组集
          //   depends: [],
          //   // 依赖于谁(id)
          //   dependPid: '',
          //   // 前置依赖的id
          //   requireId: '0-1-4-2',
          //   parentId: '0-1-4'
          // },
          {
            name: 'child3',
            ower: 'jeke',
            per: 50,
            type: '2',
            planTime: [],
            stoneTime: '',
            startTime: '2019/01/06',
            endTime: '2019/01/14',
            id: '0-1-2',
            expand: true,
            isShow: true,
            // 依赖id数组集
            depends: [],
            // 指向谁(id)
            dependPid: '0-1-1',
            parentId: '0-1-0'
          },
          {
            name: 'child4',
            ower: '',
            per: 70,
            type: '2',
            planTime: [],
            stoneTime: '',
            startTime: '2019/01/14',
            endTime: '2019/01/21',
            id: '0-1-3',
            expand: true,
            isShow: true,
            depends: [],
            dependPid: '0-1-1',
            parentId: '0-1-0'
          },
          {
            name: 'father2',
            ower: '',
            per: 70,
            type: '2',
            planTime: [],
            stoneTime: '',
            startTime: '2019/01/02',
            endTime: '2019/01/10',
            id: '0-2-0',
            expand: true,
            isShow: true,
            depends: [],
            dependPid: '',
            parentId: ''
          }
        ],
        // 字段属性
        fieldsAttr: {
          name: {
            label: '名称',
            showTable: true, // 是否于表格中显示该字段所在列
            showToast: true, // 是否于浮窗内显示该字段
            width: '150px', // 可选
            resizable: true // 可选
          },
          ower: { label: '负责人', showTable: true, showToast: false },
          per: {
            label: '进度',
            showTable: true,
            showToast: true,
            // 设置进度阶段的颜色(可选)
            processColors: [
              { 10: '#be2e55', 20: '#409eff', 50: '#13587e', 100: '#3eb88d' }
            ],
            // 连线选项背景色(可选)
            bgcolor: '#e4e7ed'
          },
          type: { label: '类型', showTable: false, showToast: false },
          startTime: { label: '开始时间', showTable: false, showToast: true },
          endTime: { label: '结束时间', showTable: false, showToast: true }
        }
      },
      currentRow: null,
      list: [],
      // 当前的时间大小,默认值
      currentDaySize: {
        label: '按天',
        value: 40,
        mode: 'day'
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.formatList(this.data.list)
      this.$nextTick(() => {
        this.$refs.gattTabble.init(this.list, this.data.fieldsAttr)
        this.$refs.gattDate.init(this.list, this.data.fieldsAttr)
      })
    },
    TableScrollTop (val) {
      this.tableScrollTop = val
    },
    handlerBGScroll (e) {
      this.BGScrollTop = e.srcElement.scrollTop
    },
    // rowClick事件
    handlerRowClick (row) {
      this.currentRow = row
      window.scrollTo({
        top: 0,
        left: row.left - 100,
        behavior: 'smooth'
      })
    },
    // 依据时间计算left，width top设置list
    formatList (arr) {
      arr.forEach((item, index) => {
        const obj = {}
        let startLeft = 0; let endLeft = 0
        if (item.startTime) {
          // 依据开始时间设置left
          startLeft = this.computedLeft(item.startTime)
          obj.left = startLeft
        }
        if (item.endTime) {
          // 依据结束时间设置width
          const y = new Date(item.endTime).getFullYear()
          let m = new Date(item.endTime).getMonth() + 1
          let d = new Date(item.endTime).getDate()
          m = m >= 10 ? m : `0${m}`
          d = d >= 10 ? d : `0${d}`
          endLeft = this.computedLeft(`${y}/${m}/${d}`)
          obj.widthMe = endLeft - startLeft
          obj.widthChild = endLeft - startLeft
        }
        // 依据索引设置top
        const topStep = 40
        obj.top = topStep * index + 12
        this.list.push(Object.assign(obj, item))
      })
    },
    // 根据时间计算left
    /**
     * @param  {String} timeStr
     */
    computedLeft (timeStr) {
      const startTimeYear = new Date(this.startTime).getFullYear()
      const startYear = this.currentYear - 1 > startTimeYear ? startTimeYear : this.currentYear - 1
      const curLeft = (new Date(timeStr).getTime() - new Date(`${startYear}/01/01`).getTime()) / (1000 * 60 * 60 * 24) * this.currentDaySize.value
      return curLeft
    },
    //  左边宽度设置
    rightLineMousedown (e) {
      const cx = e.clientX
      let result
      document.onmousemove = event => {
        result = event.clientX - cx
        if (cx + result <= 300) return
        this.$refs.rightLine.style.left = cx + result + 'px'
      }
      document.onmouseup = () => {
        document.onmousemove = document.onmouseup = null
        if (cx + result <= 300) {
          this.rightLineX = 300
          return
        }
        this.rightLineX = cx + result
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.chart{
  height: 100%;
  position: relative;
  user-select: none;
  .header{
    height: 40px;
    position: relative;
    &-left{
      margin-left: 10px;
      box-sizing: border-box;
      padding-top: 5px;
      height: 40px;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #fff;
    }
  }
  &-left{
    position: fixed;
    top: 40px;
    left: 0;
    height: calc(100% - 40px);
    background-color: #fff;
    z-index: 999;
    &-rightLine{
      z-index: 999;
      position: absolute;
      top: 0;
      height: 100%;
      width: 2px;
      background-color: #d7d7d7;
      box-shadow: 4px 2px 12px 0 rgba(0,0,0,.2);
      cursor: col-resize;
      &:hover{
        background-color: #409eff;
      }
    }
  }
  &-right{
    display: flex;
    height: calc(100% - 40px);
    position: relative;
  }
}
</style>
